<template>
<view class="u-p-b-20">
		<view class="tab-height"></view>
	 <view class="tabs">
	
		<view v-for="(item, index) in tabs" :key="index" class="tab-item" 
		:class="{ active: current === index }"
			@click="tabClick(index)">
			{{ item.name }} ({{ item.count }})
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		name: "my-tabs",
		props: {
			tabs: {
				type: Array,
				default: () => []
			},
			current: {
				type: Number,
				default: 0
			}
		},
		methods: {
			tabClick(index) {
				if (this.current !== index) {
					this.$emit('change', index);
				}
			}
		}
	}
</script>

<style scoped>
   .tab-height{
	width: 100%;
	height: 21rpx;
   }
	.tabs {
		display: flex;
		background-color: #fff;
		padding:12rpx 16rpx;
		box-shadow: 0rpx 8rpx 10rpx -5rpx rgba(0,0,0,0.04);
        border-radius: 1998rpx;
		height: 96rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		color: #666;
		font-size: 28rpx;
		transition: all 0.3s ease;
	}

	.tab-item.active {
		background: rgba(80,159,252,0.1);
        border-radius: 1998rpx;
		color: #509FFC;
		font-weight: 600;
		font-size: 30rpx;
		
	}
</style> 